<template>
  <el-form
      :model="queryForm"
      ref="queryFormRef"
      :inline="true"
      label-width="70px"
  >
    <el-form-item label="系统模块" prop="title">
      <el-input
          v-model="queryForm.title"
          placeholder="请输入系统模块"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery()"
      />
    </el-form-item>
    <el-form-item label="操作人员" prop="operName">
      <el-input
          v-model="queryForm.operName"
          placeholder="请输入操作人员"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery()"
          @change="handleQuery()"
      />
    </el-form-item>
<!--    <el-form-item label="类型" prop="businessType">-->
<!--      <el-select-->
<!--          v-model="queryForm.businessType"-->
<!--          placeholder="操作类型"-->
<!--          clearable-->
<!--          style="width: 240px"-->
<!--      >-->
<!--        <el-option-->
<!--            v-for="dict in sys_oper_type"-->
<!--            :key="dict.value"-->
<!--            :label="dict.label"-->
<!--            :value="dict.value"-->
<!--        />-->
<!--      </el-select>-->
<!--    </el-form-item>-->
    <el-form-item label="状态" prop="status">
      <el-select
          v-model="queryForm.status"
          placeholder="角色状态"
          clearable
          @change="handleQuery()"
          style="width: 240px"
      >
        <el-option
            v-for="dict in statusOptions"
            :key="dict.label"
            :label="dict.label"
            :value="dict.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="操作时间" style="font-weight: bold">
      <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          clearable
          @change="handleQuery()"
      ></el-date-picker>
    </el-form-item>
    <el-form-item class="item-search">
      <el-button @click="resetClick">重置</el-button>
      <el-button type="primary" @click="handleQuery">搜索</el-button>
    </el-form-item>
  </el-form>
  <Tbale
      :isSelect="true"
      :table-data="tableData"
      :table-column="tableColumn"
      @pagination-change="getList"
      v-model:page-num="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :total="total">
    <template #edit="{row}">

      <el-link
          class="el-link-spacing"
          :underline="false"
          size="small"
          type="danger"
          icon="delete"
          @click="handleDelete(row)"
      ><span class="table_link_text">删除</span></el-link>
    </template>
  </Tbale>


</template>
<script lang="ts" setup>
import Tbale from "@/components/Table/ElTable.vue";
import {getCurrentInstance, nextTick, onMounted, ref} from "vue";


import {addDateRange} from "@/utils/z.ts";
import {ElForm, ElMessage, ElMessageBox, ElTree} from "element-plus";
import {roleDeptTreeselect} from "@/api/system/dept.ts";
import {delLogininfor, logininforList} from "@/api/system/monitor/logininfor.ts";
import {delRole} from "@/api/system/role.ts";
import {delOperlog, operlogList} from "@/api/system/monitor/operlog.ts";

const {proxy} = getCurrentInstance();
onMounted(() => {
  getList()
})
const queryForm = ref(
    {
      pageNum: 1,
      pageSize: 10,
      title: undefined,
      operName: undefined,
      businessType: undefined,
      status: undefined
    }
)
const total = ref(0)

const defaultProps = {
  children: "children",
  label: "label",
};
// 状态数据字典
const statusOptions = ref<any>([
  {
    value: "0",
    label: "正常",
  }, {
    value: "1",
    label: "停用",
  },
]);


// 选中数组
const ids = ref<any>();
const resetClick = () => {
  queryForm.value = {
    pageNum: 1,
    pageSize: 10,
    title: undefined,
    operName: undefined,
    businessType: undefined,
    status: undefined
  }
  dateRange.value = [];
  getList()
}
const getList = () => {
  operlogList(addDateRange(queryForm.value, dateRange.value)).then(
      (response: any) => {
        tableData.value = response.rows;
        total.value = parseInt(response.total);
      }
  );
}
const tableData = ref<Array<Object>>([])

const tableColumn = ref<Array<Object>>([
  {
    label: '日志编号',
    prop: 'operId',

  },
  {
    label: '系统模块',
    prop: 'title',

  },
  {
    label: '操作类型',
    prop: 'businessType',

  }, {
    label: '请求方式',
    prop: 'requestMethod',
  }, {
    label: '操作人员',
    prop: 'operName',
  }, {
    label: '主机',
    prop: 'operIp',
  }, {
    label: '描述',
    prop: 'msg',
  }, {
    label: '操作状态',
    prop: 'status',
  }, {
    label: '操作日期',
    prop: 'operTime',
  }, {
    label: '操作',
    prop: 'edit',
    slot: true,
  },
])


const handleQuery = () => {
  getList()
}

// 日期范围
const dateRange = ref<any>();

const handleDelete = (row:any) => {
  const operIds = row.operId || ids.value;
  ElMessageBox.confirm('是否确认日志编号为"' + operIds + '"的数据项?',)
      .then(() => {
        return delOperlog(operIds);
      })
      .then((response: { code: number; }) => {
        if (response.code === 200) {
          getList();
          ElMessage({message: "删除成功", type: 'warning'})
        }
      }).catch(() => {

    console.log("删除操作取消");
  });
};


</script>
<style scoped>

</style>
